<template>
  <div class="s-box">
    <group-title v-if="mySubscribeList.length==0">
      还没有订阅，快去订阅大佬们吧。
    </group-title>
    <group title="我的订阅" v-else>
      <swipeout>
        <swipeout-item v-for="(item,index) in mySubscribeList" @on-close="handleEvents('on-close')"
                       @on-open="handleEvents('on-open')" transition-mode="follow">
          <div slot="right-menu">
            <swipeout-button @click.native.stop="onButtonClick(item,index)" type="warn">取消订阅</swipeout-button>
          </div>
          <div slot="content" class="demo-content vux-1px-t" @click="routerTo('userInfo/'+item.userId)">
            <cell-box align-items="center">
              <div class="img-content">
                <avatar :src="item.avatar" boxWidth="1.2rem" boxHeight="1.2rem"></avatar>
              </div>
              <div class="awesomeList-info">
                <span class="text-large">{{item.username}}</span>
                <br>
                <span class="text-small">{{item.shortIntroduction}}</span>
              </div>
              <div class="awesomeList-item">
                <span>今日收益</span>
                <br>
                <span :class="[item.todayProfitPercent<0?'text-green':'text-red']">{{item.todayProfitPercent | formatPlusMinus}}%</span>
              </div>
              <div class="awesomeList-item">
                <span>预期年化</span>
                <br>
                <span>{{item.expectYearProfitPercent}}%</span>
              </div>
            </cell-box>
          </div>
        </swipeout-item>
      </swipeout>

    </group>

  </div>
</template>

<script>
  import Avatar from '@/components/Avatar'
  import {Group, Panel, CellBox, Swipeout, SwipeoutItem, SwipeoutButton, GroupTitle} from 'vux'

  export default {
    components: {
      Avatar,
      Group,
      CellBox,
      GroupTitle,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton,
      Panel
    },
    data() {
      return {
        mySubscribeList: []
      }
    },
    created() {
      this.getAllMySubscribe();
    },
    methods: {
      getAllMySubscribe() {
        this.$api.getAllMySubscribe().then((data) => {
          this.mySubscribeList = data.mySubscribeList;
        });
      },
      onButtonClick(item, index) {
        this.$api.cancelSubscribe({
          awesomeId: item.userId
        }).then((data) => {
          if (data.returnCode === 1) {
            this.$vux.toast.show({
              position: 'top',
              text: data.returnMsg,
              isShowMask: true
            });
            this.mySubscribeList.splice(index, 1);
          }
        })
      },
      handleEvents(type) {
//        console.log('event: ', type)
      }
    }
  }
</script>

<style lang="less" scoped>
  .img-content {
    font-size: 0;
    margin-right: .1rem;
  }

  .awesomeList-info {
    width: 5rem;
    border-right: 1px solid #f1f1f1;
    margin-left: 5px;
  }

  .awesomeList-item {
    width: 2rem;
    text-align: center;
    border-right: 1px solid #f1f1f1;

    span {
      font-size: .3rem;
    }
  }
</style>
